<template>
  <BasicModal 
    v-bind="$attrs" 
    @register="registerModal" title="字段库" @ok="handleSubmit" 
    :width="750" 
    :minHeight="500"
    destroyOnClose
  >
    <BasicTable @register="registerTable" >
      <template #form-submitBefore>
        <a-button type="primary" @click="handleForm(false, {})" style="margin-left: -90px;" >
          <Icon icon="ant-design:plus-outlined" /> {{ t('新增') }}
        </a-button>
      </template>
    </BasicTable>
    <InputForm @register="registerInputFormDrawer" @success="handleSuccess" />
  </BasicModal>
</template>
<script lang="ts" name="field-library" setup>
import { ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicTable, BasicColumn, useTable, FormSchema } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import { useI18n } from '/@/hooks/web/useI18n';
import { useGlobSetting } from '/@/hooks/setting';
import { listFieldLibrary, deleteFieldLibrary } from '../api';
import { useMessage } from '/@/hooks/web/useMessage';
import InputForm from './FieldLibraryForm.vue';
import { useRouter } from "vue-router"
import { Icon } from '/@/components/Icon';

const emit = defineEmits(['success', 'register']);
const { t } = useI18n('');
const { createMessage } = useMessage();
const glob = useGlobSetting();
const [registerInputFormDrawer, { openDrawer: openInputFromDrawer }] = useDrawer();


const columns: BasicColumn[] = [
  {
    title: t('字段名称'),
    dataIndex: 'fieldName',
    width: 100,
  },
  {
    title: t('字段key'),
    dataIndex: 'fieldKey',
    width: 100,
  },
  {
    title: t('字段备注'),
    dataIndex: 'remark',
    width: 100,
  },
  {
    title: t('更新时间'),
    dataIndex: 'updatedAt',
    width: 150,
    align: 'center',
  },
];

const searchFormSchema: FormSchema[] = [
{
    // label: t('字段名称'),
    field: 'keyWord',
    component: 'Input',
    componentProps: {
      placeholder: t('字段名称/Key'),
      maxlength: 64,
    },
  },
];

const actionColumn: BasicColumn = {
  width: 130,
  title: '操作',
  dataIndex: 'action',
  fixed: false,
  slot: 'tableActions',
  actions:  (record: Recordable) => [
    {
      label: '删除',
      color: 'error',
      ifShow: record.sendStatus != 1,
      // auth: 'sys:area:delete',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
    {
      label: '编辑',
      // auth: 'sys:area:update',
      onClick: handleForm.bind(null, true, record),
    },
  ],
  dropDownActions: (record: Recordable) => [
    
  ]
}

const [registerTable, { reload, getSelectRows }] = useTable({
  api: listFieldLibrary,
  columns: columns,
  bordered: false,
  beforeFetch: (params) => {
    return params;
  },
  rowSelection: {},
  clickToRowSelect: true,
  formConfig: {
    baseColProps: { lg: 12, md: 12 },
    schemas: searchFormSchema,
    autoSubmitOnEnter: true,
    showResetButton: false,
    showSubmitButton: false
  },
  immediate: true,

  showTableSetting: false,
  useSearchForm: true,
  isTreeTable: false,
  pagination: false,
  canResize: false,
  rowKey: 'id',
  actionColumn,
})

const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  
});


async function handleDelete(record) {
  await deleteFieldLibrary({ id: record.id }, reload);
}

const handleForm = (isUpdate, record) => {
  openInputFromDrawer(true, { record, isUpdate });
}

const handleSuccess = () => {
  reload()
}

const handleSubmit = async () => {
  const selected = await getSelectRows()
  const data = selected.map(e => ({
    key: e.fieldKey,
    desc: e.fieldName
  }))
  emit('success',data )
  closeModal()
}
</script>
